<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root">
        <div @click="handle1" @click="handle">123</div>
        <!-- <form action="http://www.baidu.com">
            <button @click.prevent="test">123</button>
        </form> -->
        <div @click.once="w">
            wwww
            <div @click.stop.once="i">555</div>
        </div>

        <button @click="show=0">话费</button>
        <button @click="show=1">机票</button>
        <button @click="show=2">服装</button>
        <div v-if="show == 0">话费内容</div>
        <div v-if="show == 1">机票内容</div>
        <div v-if="show == 2">服装内容</div>

        <input type="text" v-model="con" @keyup.q.a="dayin">
        <div>{{dddd}}</div>
    </div>
    <script>
        const data = { msg: 'haha' ,show:0,con:'',dddd:{ id: 1, name: "貂蝉" }}
        const VM = new Vue({
            el: '#root',
            data() {
                return data;
            },
            methods: {
                dayin(){
                    console.log(this.con)
                },
                handle() {
                    alert('666');

                },
                handle1() {
                    alert('777')
                    console.log(event);
                },
                test() {
                    alert('999');
                },
                w() {
                    alert('wwww')
                },
                i() {
                    alert('iiii')
                }

            }
        });
        console.log(VM);
    </script>
</body>

</html>